<template>
    <div id="app">
        <el-container style="background: url(http://rww08uahf.hn-bkt.clouddn.com/0dd8ed5b730c4df7babec5898c4b641c.png);">
            <!--抬头开始-->
            <el-header>
                <Top/>
            </el-header>
            <!--抬头结束-->
            <!--内容开始-->
            <el-main >

                <el-row gutter="20">
                    <el-col span="20">
                        <el-tabs v-model="activeName" @tab-click="handleClick" >
                            <el-tab-pane  name="first"  >
                                <span slot="label" style="color: white;font-size: 18px">头衔</span>
                                <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#E4E6E7
                                    SIZE=2>
                                </HR>

                                <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#E4E6E7
                                    SIZE=2>
                                </HR>

                                <el-carousel :interval="4000" type="card" height="303px">
                                    <el-carousel-item v-for="item in src" :key="index">
                                        <el-card :body-style="{ padding: '0px' }" style="height: 300px ;background-color: rgba(0,0,0,60%)"
                                            shadow="always">
                                            <img :src="item.image" class="image" style="height: 220px ">
                                            <div style="padding: 14px;">
                                                <span style="color: gold">{{ item.titleName }}</span>
                                                <div class="bottom clearfix">
                                                    <time class="requirement">所需积分:{{ item.integralRequire }}</time>
                                                    <el-button type="text" class="button" @click="open1(item.id)">兑换</el-button>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-carousel-item>
                                </el-carousel>
                                <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#E4E6E7
                                    SIZE=2>
                                </HR>
                                <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#E4E6E7
                                    SIZE=2>
                                </HR>

                                <el-divider content-position="left"></el-divider>

                                <el-row>
                                    <el-col :span="8" v-for="item in src" :key="index">
                                        <el-card :body-style="{ padding: '0px' }" style="height: 300px;background-color: rgba(255,255,255,20%);margin: 2px 2px 2px 2px "
                                            shadow="hover">
                                            <img :src="item.image" class="image" style="height: 220px ">
                                            <div style="padding: 14px;">
                                                <span style="color: gold">{{ item.titleName }}</span>
                                                <div class="bottom clearfix">
                                                    <span class="requirement">所需积分:{{ item.integralRequire }}</span>
                                                    <el-button type="text" class="button" @click="open1(item.id)">兑换</el-button>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>


                            <el-tab-pane  name="second">
                                <span slot="label" style="color: white;font-size: 18px">周边</span>
                                <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#E4E6E7
                                    SIZE=2>
                                </HR>

                                <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#E4E6E7
                                    SIZE=2>
                                </HR>
                                <el-carousel :interval="4000" type="card" height="404px">
                                    <el-carousel-item v-for="item in zhoubian" :key="index">
                                        <el-card :body-style="{ padding: '0px' }" style="height: 400px;background-color: rgba(0,0,0,60%) "
                                            shadow="hover">
                                            <img :src="item.url" class="image" style="height: 300px ">
                                            <div style="padding: 14px;">
                                                <span style="color: gold">{{ item.name }}</span>
                                                <div class="bottom clearfix">
                                                    <span class="requirement">所需积分:{{ item.integral }},等级限制:{{ item.level
                                                    }}</span>
                                                    <el-button type="text" class="button" @click="open3">兑换</el-button>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-carousel-item>
                                </el-carousel>
                                <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#E4E6E7
                                    SIZE=2>
                                </HR>
                                <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#E4E6E7
                                    SIZE=2>
                                </HR>


                                <el-row>
                                    <el-col :span="8" v-for="item, index in zhoubian" :key="index">
                                        <el-card :body-style="{ padding: '0px' }" style="height: 400px;background-color: rgba(255,255,255,20%);margin: 2px 2px 2px 2px "
                                            shadow="hover">
                                            <img :src="item.url" class="image" style="height: 300px ">
                                            <div style="padding: 14px;">
                                                <span style="color: gold">{{ item.name }}</span>
                                                <div class="bottom clearfix">
                                                    <span class="requirement">所需积分:{{ item.integral }},等级限制:{{ item.level
                                                    }}</span>
                                                    <el-button type="text" class="button" @click="open3">兑换</el-button>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>

                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                    <el-col span="4">
                        <el-row style="margin-top: 10px">
                          <div v-if="user==null">
                            <el-divider content-position="left">个人账户</el-divider>
                            <HR style="FILTER: alpha(opacity= 100 ;finishopacity = 0,style=3)" width="60%" color=#E4E6E7 SIZE=2>
                            </HR>
                            <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="40%" color=#E4E6E7 SIZE=2>
                            </HR>
                            <h1 style="text-align: center;color: #007aff">你尚未登录，请登录</h1>
                            <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="40%" color=#E4E6E7 SIZE=2>
                            </HR>
                            <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="60%" color=#E4E6E7 SIZE=2>
                            </HR>
                            <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#E4E6E7 SIZE=2></HR>
                          </div>
                          <div v-else >
                              <b><p style="text-align: center;font-size: 18px;text-shadow: -3px -3px 10px white, 3px 3px 10px black;color: white">个人账户</p></b>
                            <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="60%" color=#E4E6E7 SIZE=2>
                            </HR>
                            <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="40%" color=#E4E6E7 SIZE=2>
                            </HR>
                            <h1 style="text-align: center;text-shadow: -3px -3px 10px white, 3px 3px 10px black;color: white">level{{ user.level }}</h1>
                            <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="40%" color=#E4E6E7 SIZE=2>
                            </HR>
                            <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="60%" color=#E4E6E7 SIZE=2>
                            </HR>

                              <h1 style="text-align: center;text-shadow: -3px -3px 10px white, 3px 3px 10px black;color: white">积分余额</h1>

                            <h2 style="text-align: center;color: rgba(8, 242, 246, 1)">{{ integralNow }}</h2>


                            <el-button type="primary" @click="dialogFormVisible = true" style="margin-left: 30%;margin-right: 30%">充值积分</el-button>
                            <el-dialog title="输入金额" :visible.sync="dialogFormVisible">
                              <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
                                <el-form-item
                                    label="金额"
                                    prop="money"
                                    :rules="[
                              { required: true, message: '金额不能为空'},
                              { pattern: /^[1-9]\d*$/, message: '金额必须为正整数'}
                            ]">
                                  <el-input v-model.number="numberValidateForm.money" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item>
                                  <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                                  <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                                </el-form-item>
                              </el-form>
                            </el-dialog>

                            <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#E4E6E7 SIZE=2></HR>
                          </div>

                            <span class="requirement">Q&A:</span>
                            <el-divider></el-divider>
                            <span class="requirement">Q:头衔是什么？</span>
                            <p></p>
                            <span class="requirement">A:头衔是KUN吧主打的动态装扮体系，通过佩戴不同头衔可以丰富您的个人信息！</span>
                            <el-divider></el-divider>
                            <span class="requirement">Q:什么是等级限制？</span>
                            <p></p>
                            <span class="requirement">A:兑换头衔需要本身等级大于头衔等级限制方可兑换！</span>
                            <el-divider></el-divider>
                            <span class="requirement">Q:积分的充值比例？</span>
                            <p></p>
                            <span class="requirement">A:积分与现实货币的比例为100:1！</span>
                            <el-divider></el-divider>
                            <span class="requirement">Q:兑换的头衔是否有时效限制？</span>
                            <p></p>
                            <span class="requirement">A:兑换头衔即永久拥有！</span>
                            <el-divider></el-divider>
                            <span class="requirement">Q:积分获得途径？</span>
                            <p></p>
                            <span class="requirement">A:</span>
                            <ul class="requirement">
                                <li>签到获取积分，坚持签到每天可无条件领取5积分！</li>
                                <li>限时领取积分，每天可从秒杀专区不定时无条件领取99-9999内的大量积分！</li>
                                <li>发布博客赠送积分，成功发布博客可赠送50积分！</li>
                                <li>充值获取积分，可获得充值金额乘以100的积分！</li>
                                <li>......</li>
                            </ul>
                            <div id="player" class="aplayer"></div>
                        </el-row>

                    </el-col>
                </el-row>
            </el-main>
            <!--内容结束-->
            <!--底部开始-->
          <Bottom/>
            <!--底部结束-->
        </el-container>
    </div>
</template>

<script>

import Top from '@/components/Top.vue'
import Bottom from "@/components/Bottom.vue";
import axios from "axios";
import '@/api/request'

export default {
  components: {
    Top,
    Bottom,
  },
  data() {
        return {
          dialogFormVisible: false,
          numberValidateForm: {
            money: ''
          },
          gettitleId:'',
          integralNow:'',
          userId:'',
          user: localStorage.user ? JSON.parse(localStorage.user) : null,
            count: 10,
            loading: false,
            activeName: 'first',
            size: '',
            percentage: 80,
            level: 8,
            src: [
                /*{ url: '../static/imgs/title/20201129224816_62498.gif', name: '珠光宝气', level: 8, integral: 9999 }*/

            ],
            zhoubian: [
                { url: 'http://rww08uahf.hn-bkt.clouddn.com/%E5%91%A8%E8%BE%B91.jpg', name: '手办', level: 8, integral: 9999 }, { url: 'http://rww08uahf.hn-bkt.clouddn.com/%E5%91%A8%E8%BE%B92.png', name: '钥匙环', level: 4, integral: 9999 },
                { url: 'http://rww08uahf.hn-bkt.clouddn.com/%E5%91%A8%E8%BE%B93.jpg', name: '手机链', level: 5, integral: 9999 }, { url: 'http://rww08uahf.hn-bkt.clouddn.com/%E5%91%A8%E8%BE%B94.png', name: '挂件', level: 7, integral: 9999 }
            ]
        }
    },
    computed: {
        noMore() {
            return this.count >= 2000
        },
        disabled() {
            return this.loading || this.noMore
        }
    },
    mounted() {
    //挂载后获取后端数据将数据存入sdeptFilter
        if (JSON.parse(localStorage.getItem("user"))==null)return
      axios
          .get('http://localhost:8088/integralDetail/getIntegralDetail/'+this.userId)
          .then(res => {
            //将后端的数据存储进一个变量，因为接受的是一组数据的对象所以我循环把我想要的单个数据存储进
            //一个数组变量并调用去重函数，存储到data里的sdeptFilters
            let itSdept = res.data.data;
            let array = [];
            for (let i = 0; i < itSdept.length; i++) {
             array.push(itSdept[i].createTime);
            }
           let arr = this.unique(array);
            for (let i = 0; i < arr.length; i++) {
              let temp = { text: arr[i], value: arr[i] };
              this.sdeptFilter.push(temp);
            }
            this.unique(this.sdeptFilter);
          })
          .catch(error => {
           console.log(error);
          });
    },
  created() {
      if (localStorage.getItem("user")===null){
          this.$message.error('请先登录！');
      }
    this.userId=  JSON.parse(localStorage.getItem("user")).id
    console.log(this.userId)
    //读取图片
    axios.get('http://localhost:8088/title/listOfShop').then((res)=>{
      console.log(res);
      this.src=res.data.data;
    })

    //获取登录用户的实时积分
    axios.get('http://localhost:8088/user/info/'+ this.userId).then((res)=>{
      console.log(res);
      localStorage.integral = JSON.stringify(res.data.data.integral);
      this.integralNow=JSON.parse(localStorage.getItem("integral"));
    })

  },
    methods: {

      resetForm(formName) {//重置
        this.$refs[formName].resetFields();
      },

      submitForm(formName) {//充值
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = 'http://localhost:8088/pay/alipay?money='
            axios.post(url+this.numberValidateForm.money).then((response) => {
              document.write(response.data)
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
        //抬头导航栏判断
        open1(id) {
          console.log(id);
          this.gettitleId=id
          console.log(this.gettitleId);
            this.$confirm('确认兑换此头衔吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

              axios.get('http://localhost:8088/userTitle/get/'+this.gettitleId).then((response)=>{
                  if (response.data.code==1){
                      this.$message({
                          type: 'success',
                          message: response.data.data
                      });
                  }else {
                      this.$message({
                          type: 'error',
                          message: response.data.msg
                      });
                  }
              })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消兑换'
                });
            });
        },
        open3() {
            const h = this.$createElement;
            this.$notify({
                title: '库存不足',
                message: h('i', { style: 'color: teal' }, '该商品被抢光了，下次早点来哦~')
            });
        },
        /*open() {
            this.$prompt('注意:输入的金额只能为整数', '请输入充值的金额', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^([0-9]|([1-9][0-9]{0,9}))$/,
                inputErrorMessage: '请输入正确的金额'
            }).then(({ value }) => {
              this.$refs[{ value }].validate((valid) => {
                if (valid) {
                  let url = 'http://localhost:8088/pay/alipay?money='
                  axios.post(url+{ value }).then((response) => {
                    document.write(response.data)
                  });
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消充值'
                });
            });
        },*/
        load() {
            this.loading = true
            setTimeout(() => {
                this.count += 2
                this.loading = false
            }, 2000)
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
}
</script>

<style>
@import "https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css";
@import url(//at.alicdn.com/t/c/font_4004562_b46lfqtm52u.css);
body {
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    /* 背景渐变 */
    background: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1));
}
.shadow {
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
}
::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: #1d2d44;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
}
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}
.requirement {
    font-size: 13px;
    color: whitesmoke;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
.el-message {
  top: 100px !important;
}

.el-notify{
    top: 100px !important;

}

</style>
